<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .tree li {
      cursor: pointer;
    }
  </style>
</head>

<body>

  <ul class="tree" id="tree">
    <li>Животные
      <ul>
        <li>Млекопитающие
          <ul>
            <li>Коровы</li>
            <li>Ослы</li>
            <li>Собаки</li>
            <li>Тигры</li>
          </ul>
        </li>
        <li>Другие
          <ul>
            <li>Змеи</li>
            <li>Птицы</li>
            <li>Ящерицы</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Рыбы
      <ul>
        <li>Аквариумные
          <ul>
            <li>Гуппи</li>
            <li>Скалярии</li>
          </ul>

        </li>
        <li>Морские
          <ul>
            <li>Морская форель</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <script>
    var tree = document.getElementById('tree');

    tree.onclick = function(evt) {
      var evt = evt || event;
      var target = evt.target || evt.srcElement;

      /* раскрыть-закрыть детей */
      var node = target.getElementsByTagName('ul')[0];
      if (!node) return; // нет детей

      node.style.display = node.style.display ? '' : 'none';
    }
  </script>

</body>

</html>